import { useEffect, useState } from 'react';
import { adminListApi, adminAddApi } from '@/api/user';
import {
  Table,
  Card,
  Button,
  Drawer,
  Space,
  Form,
  Input,
  Tree,
  message,
} from 'antd';
import type { DataNode, TreeProps } from 'antd/es/tree';

import { items } from '../components/Menu';

const treeData: DataNode[] = items.map((item: any) => {
  return {
    title: item.label,
    key: item.key,
    children: item.children
      ? item.children.map((it: any) => {
          return {
            title: it.label,
            key: it.key,
          };
        })
      : [],
  };
});

let checkedKeys1: any = [];

const Index = () => {
  const [list, setList] = useState([]);
  const [open, setOpen] = useState(false);

  const [form] = Form.useForm();

  const onClose = () => {
    setOpen(false);
  };

  const columns = [
    {
      title: '用户名',
      dataIndex: 'adminname',
    },
    {
      title: '账号id',
      dataIndex: 'adminid',
    },
  ];

  const getData = () => {
    adminListApi().then((res) => {
      // console.log(res);
      const result = res.data.map((item: any) => {
        return { ...item, key: item._id };
      });
      setList(result);
    });
  };

  useEffect(() => {
    getData();
  }, []);

  const onOk = () => {
    // console.log(form.getFieldsValue());
    form
      .validateFields()
      .then((res) => {
        adminAddApi({
          ...res,
          checkedKeys: checkedKeys1,
          role: '1',
        }).then((res) => {
          if (res) {
            message.success('添加成功');
            setOpen(false);
            getData();
          }
        });
      })
      .catch((err) => {
        return err;
      });
  };

  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };

  const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
    // console.log('onCheck', checkedKeys, info);
    checkedKeys1 = checkedKeys;
    console.log(checkedKeys);
  };

  return (
    <>
      <Card
        title="管理员列表"
        extra={<Button onClick={() => setOpen(true)}>添加管理员</Button>}
      >
        <Table dataSource={list} columns={columns} />
      </Card>
      <Drawer
        title="添加管理员"
        placement={'right'}
        width={500}
        onClose={onClose}
        open={open}
        extra={
          <Space>
            <Button onClick={onClose}>Cancel</Button>
            <Button type="primary" onClick={onOk}>
              OK
            </Button>
          </Space>
        }
      >
        <Form
          name="basic"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          autoComplete="off"
          form={form}
        >
          <Form.Item
            label="用户名"
            name="adminname"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label="权限">
            <Tree
              checkable
              onSelect={onSelect}
              onCheck={onCheck}
              treeData={treeData}
            />
          </Form.Item>
        </Form>
      </Drawer>
    </>
  );
};

export default Index;
